<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
</head>

<body>
    <div class="box" style="width:100%;height:800px"></div>
</body>

</html>
<script>
    // 获取dom
    let box = document.querySelector('.box')
    // 初始化
    let obj = echarts.init(box)
    // 调色盘 用于柱状图的颜色
    let myColor = ['#e63e31', '#fbc21a', '#289a48', '#000000']
    let option = {
        title: {
            text: '体重表',
        },
        // 横轴
        xAxis: {
            // 类目轴
            type: 'category',
            // 数据
            data: ['宁帅', '袁佳涵', '李树楷', '贺孝鹏'],
       
            // 分割线
            splitLine: {
                show: false
            },
            // 刻度
            axisTick: {
                // 显示
                show: true,
                // 长度
                length: 7,
                // 刻度与标签对齐
                alignWithLabel: true,
                lineStyle: {
                    // 宽度
                    width: 4,
                    // 刻度线的颜色
                    color: 'green',
                }
            },

        },
        // 纵轴
        yAxis: {
            // 数值轴
            type: 'value',
            // 分割线
            splitLine: {
                show: false
            },
            // y轴的文字说明
            axisLabel: {
                show: false
            }
        },
        // 图例
        legend: {},

        series: [
            {
                // 柱状图
                type: 'bar',
                // 数据
                data: [300, 180, 320, 100],
                //柱状图的宽度
                barWidth: '10%',
                // 每个柱状图的颜色
                itemStyle: {
                    // 圆角
                    borderRadius: [80, 80, 0, 0],
                    // 单独的颜色
                    // color: 'green'
                    // 每个柱子不同色
                    // color: function (params) {
                    //     console.log(params);
                    //     return myColor[params.dataIndex]
                    // }
                    // 柱子渐变色
                    color: {

                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'pink' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'black' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false

                    }
                },
                name: '2022',
                // 显示标签
                label: {
                    // 显示
                    show: true,
                    // 颜色
                    color: 'red',
                    // 定位
                    position: 'top',
                }

            },
            {
                // 柱状图
                type: 'bar',
                // 数据
                data: [100, 320, 180, 300],
                //柱状图的宽度
                barWidth: '10%',
                // 每个柱状图的颜色
                itemStyle: {
                    // 圆角
                    borderRadius: [80, 80, 0, 0],
                    // 单独的颜色
                    // color: 'green'
                    // 每个柱子不同色
                    // color: function (params) {
                    //     console.log(params);
                    //     return myColor[params.dataIndex]
                    // }
                    // 柱子渐变色
                    color: {

                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'pink' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'black' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false

                    }
                },
                name: '2021',
                // 显示标签
                label: {
                    // 显示
                    show: true,
                    // 颜色
                    color: 'red',
                    // 定位
                    position: 'top',
                }

            }
        ],
        // 直角坐标系内绘图网格
        grid: {
            // 显示网格
            show: true,
            // 网格边框颜色
            borderColor: 'gold',
            // 网格边框宽度
            borderWidth: 3
        }
    }
    // 调用
    obj.setOption(option)
</script>